<script setup>
import { ref, onMounted, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import wlsHead from '@/components/head.vue'
import logo from '@/assets/images/logohsq.png'
let navName = "";
const route = useRoute();

const nav_list = ref([
    {
        name: '入园管理',
        id: 'nav001',
        icon: 'icon iconfont icon-ruyuanguanli',
        path: '/enterGarden',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '预约管理',
        id: 'nav003',
        icon: 'icon iconfont icon-yuyueguanli',
        path: '/appointment',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '地图管理',
        id: 'nav004',
        icon: 'icon iconfont icon-dituguanli',
        path: '/map',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '园区动态',
        id: 'nav002',
        icon: 'icon iconfont icon-yuanqudongtai',
        path: '/article',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '物种库',
        id: 'nav005',
        icon: 'icon iconfont icon-wuzhongku',
        path: '/species',
        isgroup: false,
        isdeep: false,
        childern: []
    }
])

const isShow = ref(false)

const curnav = () => {
    isShow.value = !isShow.value;
}

const filpath = (data) => {
    nav_list.value.forEach(e => {
        if (e.isgroup) {
            e.childern.forEach(c => {
                let path = c.path.split('/')[c.path.split('/').length - 1];
                if (data == path) {
                    c.isdeep = true
                } else {
                    c.isdeep = false
                }
            })
        } else {
            let path = e.path.split('/')[e.path.split('/').length - 1];
            if (data == path) {
                e.isdeep = true
            } else {
                e.isdeep = false
            }
        }
    })
}

watch(() => route.path, newRoute => {
    let path = newRoute.split('/')[1];
    filpath(path);
})

onMounted(() => {
    let path = window.location.pathname.split('/');
    if (path.indexOf('authenticate') != -1) {
        isShow.value = true
    } else {
        isShow.value = false
    }
})

</script>
<template>
    <div class="left-nav">
        <div class="ln-head">
            <img :src="logo" alt="">
            <span>小程序管理</span>
        </div>
        <div class="ln-list" v-for="i in nav_list" :key="i.id">
            <div class="ln-box" v-if="i.isgroup">
                <div class="ln-title" :class="isShow ? 'lta' : 'lt'" @click.stop="curnav(i)">
                    <i :class="i.icon"></i>
                    <div><span>{{ i.name }}</span></div>
                    <i :class="isShow ? 'icon iconfont icon-shouqi' : 'icon iconfont icon-xiala'"></i>
                </div>
                <div class="ln-nav-b" v-show="isShow">
                    <router-link class="ln-nav" :class="k.isdeep ? 'my-active' : ''" v-for="k in i.childern" :key="k.id"
                        :to="{ path: k.path }">
                        <i style="opacity: 0;" class="icon iconfont icon-a-Property1xuanzhong-4"></i>
                        <div><span>{{ k.name }}</span></div>
                    </router-link>
                </div>
            </div>
            <div class="ln-box" v-else>
                <router-link class="ln-nav" :class="i.isdeep ? 'my-active' : ''" :to="{ path: i.path }">
                    <i :class="i.icon"></i>
                    <div><span>{{ i.name }}</span></div>
                </router-link>
            </div>

        </div>

        <wls-head />
    </div>
</template>

<style scoped>
.left-nav {
    width: 1.6rem;
    height: 100%;
    user-select: none;
    border-right: 1px solid #DCDFE6;
    background: var(--wls-nav);
    position: relative;
}

.ln-head {
    width: 100%;
    height: 1.2rem;
    color: var(--wls-color);
    font-size: .18rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ln-head img {
    width: .5rem;
    height: .5rem;
    margin-bottom: .08rem;
}

.ln-list {
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

.ln-box {
    overflow: hidden;
}

.ln-title {
    width: 100%;
    height: .5rem;
    padding: 0 .2rem;
    display: flex;
    align-items: center;
}


.lt {
    color: var(--wls-a);
}

.lta {
    color: var(--wls-a);
}

.ln-title i {
    font-size: .16rem;
}

.ln-title div {
    width: .84rem;
    margin-left: .08rem;
}

.ln-nav-b {
    width: 100%;
    overflow: hidden;
}

.ln-nav {
    width: 100%;
    height: .5rem;
    padding: 0 .2rem;
    display: flex;
    align-items: center;
}

.ln-nav div {
    width: .84rem;
    margin-left: .08rem;
}
</style>
